/**************************************
 *
 * VLOOK™ CSS - Typora 编辑时内置样式
 * (配合 base.less 进行使用)
 *
 * V28.1
 * 2025-01-18
 * powered by MAX°孟兆
 *
 * QQ Group: 805502564
 * Telegram Channel: t.me/vlook_markdown
 * email: maxchow@qq.com
 *
 * https://github.com/MadMaxChow/VLOOK
 * https://gitee.com/madmaxchow/VLOOK
 *
 *************************************/

:root {
    // 针对 Typora 编辑时 UI 相关变量
    --active-file-bg: var(--pn-c);
    --active-file-text-color: var(--d-fc);
    --text-color: var(--d-fc);
    --active-toggle-btn-color: var(--a-hover-color);
    --monospace: var(--v-f-fm-code);

    --cm-keyword-lg: #770088;
    --cm-variable-lg: var(--d-fc-lg);
    --cm-variable-2-lg: #0055AA;
    --cm-variable-3-lg: #008855;
    --cm-tag-lg: #9ab696;
    --cm-attribute-lg: #0000CC;
    --cm-string-lg: #AA1111;
    --cm-string-2-lg: #FF5500;
    --cm-comment-lg: #AA5500;
    --cm-header-lg: #0000FF;
    --cm-quote-lg: #009900;
    --cm-hr-lg: #999999;
    --cm-link-lg: #0000CC;
    --cm-negative-lg: #DD4444;
    --cm-positive-lg: #229922;
    --cm-meta-lg: #555555;
    --cm-bulidin-lg: #3300AA;
    --cm-bracket-lg: #999977;
    --cm-atom-lg: #221199;
    --cm-number-lg: #116644;

    --cm-keyword-dk: #C88FD0;
    --cm-variable-dk: var(--d-fc-dk);
    --cm-variable-2-dk: #9FBAD5;
    --cm-variable-3-dk: #1CC685;
    --cm-tag-dk: #7DF46A;
    --cm-attribute-dk: #7575E4;
    --cm-string-dk: #D26B6B;
    --cm-string-2-dk: #FF5500;
    --cm-comment-dk: #DA924A;
    --cm-header-dk: #8D8DF0;
    --cm-quote-dk: #57AC57;
    --cm-hr-dk: #D8D5D5;
    --cm-link-dk: #D3D3EF;
    --cm-negative-dk: #D95050;
    --cm-positive-dk: #50E650;
    --cm-meta-dk: #B7B3B3;
    --cm-bulidin-dk: #F3B3F8;
    --cm-bracket-dk: #999977;
    --cm-atom-dk: #84B6CB;
    --cm-number-dk: #64AB8F;

    --cm-keyword: var(--cm-keyword-lg);
    --cm-variable: var(--cm-variable-lg);
    --cm-variable-2: var(--cm-variable-2-lg);
    --cm-variable-3: var(--cm-variable-3-lg);
    --cm-tag: var(--cm-tag-lg);
    --cm-attribute: var(--cm-attribute-lg);
    --cm-CodeMirror-cursor: var(--a-hover-color);
    --cm-string: var(--cm-string-lg);
    --cm-string-2: var(--cm-string-2-lg);
    --cm-comment: var(--cm-comment-lg);
    --cm-header: var(--cm-header-lg);
    --cm-quote: var(--cm-quote-lg);
    --cm-hr: var(--cm-hr-lg);
    --cm-link: var(--cm-link-lg);
    --cm-negative: var(--cm-negative-lg);
    --cm-positive: var(--cm-positive-lg);
    --cm-meta: var(--cm-meta-lg);
    --cm-bulidin: var(--cm-bulidin-lg);
    --cm-bracket: var(--cm-bracket-lg);
    --cm-atom: var(--cm-atom-lg);
    --cm-number: var(--cm-number-lg);

    // --------------------
    // 针对 Typora UI 颜色变量
    --bg-color: var(--d-bc); // 替换为透明色，以在 Typora 编辑时正常显示背景图片
    --side-bar-bg-color: var(--d-bc);

    --border-color: var(--d-fc-a);

    // 选择的文本背景
    --select-text-bg-color: var(--v-selected-color);

    --search-select-bg-color: var(--v-selected-color);

    --control-text-color: var(--d-fc-lg);
    --control-text-hover-color: var(--d-fc-lg);
    --window-border: 1px solid var(--pn-c-lg);

    --active-file-bg-color:  var(--d-bc-lg);
    --active-file-bder: var(--select-text-bg-color);
    //--active-file-text-color: var(--d-fc-lg);

    --item-hover-bg-color: var(--a-hover-color);
    --item-hover-text-color: @buttonForeHoverColor;

    --primary-color: @theme1;

    --rawblock-edit-panel-bd: var(--pn-c);
}

// 选中内容的样式
::selection {
    background: var(--v-selected-color) !important;
    fill: var(--d-fc) !important; // for SVG text
}

// 针对 Typora 导出时自带的侧边栏
.typora-export-sidebar {
    display: none !important;
}

// 保留原始 fa 图标强制使用指定的字体
.fa {
    font-family: FontAwesome, sans-serif !important;
}

.md-toc-inner {
    text-decoration: none;
    box-shadow: none;
}

// 大纲 / 文件面板图标
.ty-icon,
.file-node-icon,
.outline-expander::before,
.ion-ios7-search-strong::before,
#md-notification::before,
.ion-chevron-left:before,
.ion-checkmark::before,
.fa-code:before,
#top-titlebar :is(.ty-menu-btn-area-sub1, .ty-menu-btn-area-sub2, .ty-menu-btn-area-sub3),
.fa-sort-desc:before,
.fa-sort-asc:before {
    color: var(--h-f);
}
.ion-folder:before {
    color: var(--d-fc-lg);
}

content>.auto-suggest-container li:hover {
    color: var(--item-hover-text-color);
}

#top-titlebar .ty-icon {
    color: var(--d-fc);
}
.megamenu-opened #top-titlebar .ty-icon {
    color: var(--d-fc-lg);
}

.ty-menu-btn-area>span {
    border-top-width: 2px;
}
.ty-sidebar-search-panel svg.icon {
    fill: var(--h-f);
}
.fa-folder::before,
.fa-caret-right::before {
    color: var(--d-fc-a);
}
.md-resize-table .ty-icon,
.md-align-gp .ty-icon {
    color: var(--a-color);
}
.ion-android-arrow-back:before {
    color: @buttonForeColor;
}

// 表格编辑栏
.ty-table-edit {
    margin-top: -26px;
    margin-left: var(--v-r-b);
    background: @buttonBgColor;
    border-radius: var(--v-r-s) var(--v-r-s) 0 0;
    padding: 0 3px 2px 3px;
    width: auto !important;
    z-index: 3000;
}

.ty-table-edit .ty-icon {
    color: @buttonForeColor;
    line-height: 1;
}

// 表格行列数调整面板样式
.md-resize-table-th .popover {
    width: max-content;
    padding-bottom: 10px !important;
}
.md-grid-board-wrap .popover-title {
    padding-top: 10px;
}
.ty-table-edit div {
    width: max-content;
    padding: 0 5px;
}
.md-grid-board {
    border-radius: 0 !important;
}
.md-grid-board a:hover,
.md-grid-board a.md-active {
    border-color: var(--ac-t1) !important;
    background: var(--ac-t1) !important;
    box-shadow: none !important;
}
.md-grid-board :is(tr, tr:hover)::before {
    content: "" !important;
}
.md-grid-board tr>:is(th, td),
.md-grid-board tr>:is(th, td):first-child {
    padding: 5px !important;
    background: var(--ac-t1) !important;
    box-shadow: none !important;
}

// 调整表格大小
.md-resize-table {
    margin-right: 50px;
}

// 删除表格
.md-delete-table {
    margin-left: 50px;
}

.md-notification-container {
    background: var(--d-bc) !important;
}

// 导出成功后通知栏图标
#md-notification::before {
    top: 16px;
}

// 导出成功后通知栏链接图标
#md-notification a {
    color: var(--a-color);
    text-decoration: none;
    font-weight: var(--v-f-w-bd);
}
#md-notification :is(a:hover, a.default-btn:hover) {
    color: var(--a-hover-color);
}

.btn,
.searchpanel-search-option-btn,
.outline-item,
.file-node-content,
.outline-label,
.outline-expander {
    cursor: var(--cur-pointer);
}

#md-notification .btn {
    border-radius: var(--v-r-s) var(--v-r-s-xc);
    margin-left: 5px;
    color: @buttonForeColor !important;
    background: @buttonBgColor !important;
}
#md-notification .btn:hover {
    color: @buttonForeHoverColor !important;
    background: var(--a-hover-color) !important;
}
#md-notification .btn-default {
    font-weight: var(--v-f-w-bd);
}

// 注释
.md-comment {
    color: var(--d-fc-a);
    font-family: inherit;
}

// 针对 Win 一体化菜单
body.os-windows :is(.megamenu-menu, .megamenu-menu-header-title-menu) {
    background: @buttonBgColor;
    color: @buttonForeColor;
}
.megamenu-menu-header {
    border-bottom-color: @buttonForeColor;
}
#megamenu-back-btn {
    border-color: @docLibButtonBgColor;
}
.megamenu-menu-panel {
    color: var(--d-fc-a-lg);
}

.megamenu-menu-list li a {
    color: @buttonForeColor;
}
.megamenu-menu-list li a.active {
    background: @aActiveColor !important;
    color: @buttonForeHoverColor;
}
.megamenu-menu-list:not(.saved) li a:hover {
    background: var(--a-hover-color) !important;
    color: @buttonForeHoverColor;
}

// 用于在 Typora Windows 版本的一体化菜单中，进行主题选择时的预览效果
body:not([class]) :is(h1,h2,h3,h4,h5,h6) {
    color: var(--h-f);
}

// 表格工具栏按钮组、按钮
.btn-group .btn+.btn {
    margin-left: 0;
}
.btn.active {
    border-color: var(--d-bc);
    box-shadow: none;
    background-color: var(--d-bc);
}
// 当前选中状态
.btn.active>.ty-icon::before {
    color: var(--d-fc);
}

.btn,
.sidebar-footer-main-item-label {
    font-family: var(--v-f-fm-bd);
    background: none;
}

.btn,
.megamenu-content input {
    border-radius: calc(var(--v-r-s) - 2px);
    color: var(--d-fc);
}
.megamenu-section input {
    background: var(--d-bc-lg);
    color: var(--d-fc-lg);
}

.megamenu-content table {
    color: var(--d-fc-lg);
}

.megamenu-section :is(.long-btn, .btn) {
    border-radius: var(--v-r-s) var(--v-r-s-xc);
    color: var(--d-fc-lg);
}
.megamenu-section :is(.long-btn:hover, .btn:hover) {
    color: var(--d-fc-lg) !important;
    background: var(--blockquote-bg-lg);
}

.megamenu-menu-header:focus,
.megamenu-menu-header:hover,
.megamenu-menu-header:hover #megamenu-menu-header-title {
    color: @buttonForeColor;
}

.btn-primary {
    color: @buttonForeColor;
    background: @buttonBgColor;
    font-weight: var(--v-f-w-bd);
}
.btn-primary:hover {
    background: var(--a-hover-color);
}
.btn-primary:active {
    background: @aActiveColor;
}

// 针对 Win 左侧面板标签底部当前选中的边框
body.os-windows .active-tab-files #info-panel-tab-file .info-panel-tab-border,
body.os-windows .active-tab-outline #info-panel-tab-outline .info-panel-tab-border {
    background: @buttonBgColor;
    height: 2px;
}

.md-image-src-span, // 图片地址
.md-link .md-url { // 链接
    font-family: var(--monospace);
    font-weight: var(--v-f-w-text);
    font-size: .75em;
    text-decoration: none;
}

// 图片相关按钮
.md-image-btn {
    background: @buttonBgColor;
}
.md-image-btn:hover {
    background: var(--a-hover-color);
}
.md-image-input-src-btn {
    line-height: @defaultLineHeight;
    height: 30px;
    background: var(--pn-c);
    box-shadow: 0 0 0 1px @buttonBgColor inset;
    border-radius: var(--v-r-si) 0 0 var(--v-r-si);
}
.md-image-input-src-btn::before {
    color: var(--d-fc-a);
}
.md-image-input-src-btn.selected,
.md-image-input-src-btn:hover {
    background: none;
}
.md-image-pick-file-btn {
    line-height: @defaultLineHeight;
    height: 30px;
    border-left-color: var(--d-bc);
    border-radius: 0 var(--v-r-si) var(--v-r-si) 0;
}
// 针对 Win
body.os-windows :is(.md-image-input-src-btn, .md-image-pick-file-btn) {
    line-height: @paragraphInnerLineHeight;
}

// 针对 br 回车
.hide-br-and-line-break .md-expand .md-br-content,
.md-raw-inline {
    font-size: .75em;
}

// 针对 HTML 标签
.md-html-inline .md-meta {
    font-size: .75em;
    font-weight: normal;
    opacity: .6 !important;
}
.md-html-inline kbd .md-meta {
    font-size: 1em;
    opacity: 1 !important;
}

// 图片地址
.md-image {
    font-size: 1em;
}
.md-image>.md-meta {
    color: var(--a-hover-color);
}
@{writeOnEditing} a kbd .md-image>.md-meta {
    color: inherit;
    font-weight: normal;
}

:is(h3,h4,h5,h6).md-focus::before {
    border: none;
    position: inherit;
    left: inherit;
    float: none;
    top: initial;
    font-size: inherit;
    vertical-align: inherit;
    font-weight: inherit;
    line-height: inherit;
}

// 修正获取焦点时抖动
:is(h1,h2,h3,h4,h5,h6).md-focus::before {
    padding-left: 0;
    padding-right: 0;
}

// 针对 Win
body.os-windows :is(header, .ty-footer) {
    background: var(--d-bc) var(--d-bi);
}
body.os-windows :is(#top-titlebar,
.ty-footer,
#typora-sidebar,
#w-titlebar-left,
#w-traffic-lgs) {
    background: transparent;
}
body.os-windows .ty-footer { // 底栏
    border-top-color: var(--d-bc);
}

#typora-sidebar { // 侧边栏
    border-right: none;
}

.sidebar-tabs {
    border-bottom: none;
}

.sidebar-tab-btn {
    opacity: .4;
}

// 侧边栏
.sidebar-content {
    padding: 0 10px 10px 10px;
    background: none;
}
.sidebar-tab {
    line-height: 2rem !important;
    margin-top: auto !important;
}
// 侧边栏当前活动 tab
.sidebar-tab.active {
    font-family: var(--v-f-fm-title);
    font-weight: var(--v-f-w-bd);
}

// 针对 Win 侧边栏 tab
body.os-windows .info-panel-tab-title {
    white-space: pre;
    padding: 2px 0;
}
.sidebar-tabs>.sidebar-tab.active,
body.os-windows .info-panel-tab-wrapper {
    color: var(--h-f);
}
.sidebar-osx-tab::before,
body.os-windows .info-panel-tab-wrapper::before {
    content: "VLOOK™ " @themeDesc " • " @themeVer;
    text-transform: uppercase;
    white-space: pre;
    font-family: var(--v-f-fm-bd);
    font-size: .75em;
    font-weight: var(--v-f-w-bd);
    color: var(--h-f);
    position: absolute;
    width: 100%;
    text-align: center;
}

// 大纲内容为空
#typora-sidebar #file-library:empty,
#typora-sidebar .outline-content:empty {
    opacity: .4;
    border: 2px dashed var(--d-fc-a);
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    background: none;
}

// 文件库
.active-tab-files.use-file-tree-style .sidebar-content {
    bottom: 0;
}
#sidebar-content:hover #file-library {
    padding-bottom: 8px;
}
#typora-sidebar #file-library-tree {
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    padding-top: 0;
    padding-left: 0;
}
#typora-sidebar #file-library-tree:not(:empty) {
    background: var(--pn-c);
}

#typora-sidebar #file-library-list {
    height: 100%;
}
// 文件库内容为空
#typora-sidebar :is(#file-library-tree, #file-library-list-children):empty {
    opacity: .4;
    border: 2px dashed var(--d-fc-a);
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    background: none;
    height: 100%;
}

// 针对 Win 版样式的差异调整
body.os-windows #file-library-tree {
    height: 100%;
}

// 右边浮动显示的侧边栏
#toc-dropmenu {
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    box-shadow: var(--v-fl-sd), var(--v-fl-i-sd);
    top: 30px !important;
    right: 20px !important;
}
#toc-dropmenu>.outline-content {
    background: none;
}

// 右侧浮动大纲
.outline-title-wrapper {
    color: var(--h-f);
    text-transform: uppercase;
    padding-top: 10px;
    padding-bottom: 10px;
}
.outline-title {
    font-weight: var(--v-f-w-title);
    font-size: 1.25em;
}
.outline-title::after {
    content: " ･ VLOOK " @themeDesc;
    text-transform: uppercase;
}
#toc-dropmenu .divider {
    display: none;
}

// ----- 自动收起模式 -----
// 封面
@outlineCover: ~".outline-content>li:first-child.outline-h6";
// 封底
@outlinebackcover: ~".outline-content>.outline-h6:first-child ~ .outline-h1.outline-item-signle:last-child";
// 大纲面板的封面、封底条目
@{outlineCover}>.outline-item, // 封面
@{outlinebackcover}>.outline-item { // 封底
    color: var(--h-f);
    font-size: 14px;
    height: 40px;
    padding-left: 20px !important;
}

@{outlineCover}>.outline-item .outline-label :is(sup, sub) {
    opacity: 1;
    color: inherit !important;
    font-size: 1em !important;
    display: contents !important;
}
@{outlineCover}>.outline-item code, // 封面
@{outlinebackcover}>.outline-item code { // 封底
    color: inherit;
    background: none;
    font-family: var(--v-f-fm-tag);
    font-size: 1em;
    font-weight: inherit;
    padding: 0;
    box-shadow: none;
    display: inline;
    white-space: inherit;
}
@{outlineCover}>.outline-item u, // 封面
@{outlinebackcover}>.outline-item u { // 封底
    text-decoration: none;
}
// 大纲面板的封面、封底条目标识
@{outlineCover}>.outline-item::before, // 封面
@{outlinebackcover}>.outline-item::before { // 封底
    content: "Cover";
    text-transform: uppercase;
    position: absolute;
    left: 20px;
    color: var(--a-hover-color);
    font-size: .75em;
    font-style: normal !important;
}
// 大纲面板的封面项目下的 outline-expander 节点
@{outlineCover}>.outline-item .outline-expander {
    height: 10px !important;
    display: block;
}
@{outlinebackcover}>.outline-item .outline-expander {
    height: 15px !important;
    display: block;
}
// 大纲面板的封面项目下的内容节点
@{outlineCover}>.outline-item .outline-label,
@{outlinebackcover}>.outline-item .outline-label {
    display: block; // 调整为该样式后，才能触发封面节点的省略显示
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@{outlineCover}>.outline-item .outline-label::before,
@{outlinebackcover}>.outline-item .outline-label::before {
    counter-increment: h6toc;
    content: "";
    position: absolute;
    display: block;
    background-color: var(--d-fc-a);
    left: 5px;
    top: 5px;
    width: 6px;
    height: 30px;
    border-radius: calc(var(--v-r-s) - 4px) calc(var(--v-r-s-xc) - 4px);
    opacity: .25;
}
@{outlineCover}>.outline-item-active .outline-label::before,
@{outlinebackcover}>.outline-item-active .outline-label::before {
    background-color: var(--a-color);
    width: 10px;
}

// 封底
@{outlinebackcover}>.outline-item::before {
    content: "backcover";
    text-transform: uppercase;
}
@{outlinebackcover} .outline-label::before {
    content: "";
}
// ----- 非自动收起模式 -----
.no-collapse-outline .outline-label {
    padding: 3px 6px !important;
}
// 大纲面板的封面条目
.no-collapse-outline .outline-content .outline-h6:first-child>.outline-item {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}
.no-collapse-outline .outline-content .outline-h6:first-child>.outline-item::before,
.no-collapse-outline @{outlinebackcover}>.outline-item::before {
    top: 6px !important;
}
.no-collapse-outline @{outlinebackcover}>.outline-item::before {
    left: 6px !important;
    top: 8px !important;
}

// 大纲面板
.outline-content {
    font-family: var(--v-f-fm-title);
    background: var(--pn-c);
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    padding: 10px;
}
// 大纲节点
.outline-item {
    line-height: 1;
    font-family: var(--v-f-fm-subtitle);
    font-weight: normal;
    font-size: @fontSizePx;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    margin-bottom: 2px;
}
// 当前大纲节点
.pin-outline .outline-active,
.pin-outline .outline-active strong,
.pin-outline .outline-content .outline-active strong {
    font-weight: var(--v-f-w-bd);
}
.outline-item-active {
    box-shadow: @tocItemCurrent_boxShadow;
    border-radius: var(--v-r-s) var(--v-r-s-xc);
    margin-left: 0;
    border-left-width: 0;
    margin-right: 0;
    border-right-width: 0;
    font-weight: var(--v-f-w-bd);
}
// 大纲节点 hover
.outline-item:hover {
    background: var(--pn-c-a);
    border-radius: var(--v-r-s) var(--v-r-s-xc);
    margin-left: 0;
    border-left-width: 0;
    margin-right: 0;
    border-right-width: 0;
}
// 大纲节点 active
.outline-item:active,
.outline-item:active .outline-label,
.outline-item:active .outline-label::before,
.outline-label:active,
.file-library-file-node:active,
.file-library-file-node:active span {
    color: var(--d-bc);
    background: var(--d-fc-a);
}
// 针对 before content, COVER, BACK COVER etc.
.outline-item:active>.outline-expander::before,
.outline-item:active::before {
    color: var(--d-bc) !important;
}

.outline-label:hover {
    text-decoration: none;
}

// 搜索、替换
#md-searchpanel svg.icon {
    fill: var(--d-fc);
}
#md-searchpanel .btn label {
    color: var(--d-fc);
}
#md-searchpanel input {
    border-radius: var(--v-r-s) var(--v-r-s-xc);
}
// 搜索选项
.searchpanel-search-option-btn {
    color: @docLibButtonForeColor;
}
.searchpanel-search-option-btn.active {
    background-color: var(--a-hover-color) !important;
}
// 选中的搜索选项
.searchpanel-search-option-btn.active svg.icon {
    fill: @docLibButtonForeHoverColor !important;
}

// 快速打开
#typora-quick-open {
    font-family: var(--v-f-fm-tag);
    background: var(--pn-c);
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    box-shadow: var(--v-fl-sd), var(--v-fl-i-sd);
    border: none;
}
// 快速打开输入框
#typora-quick-open-input {
    padding: 5px;
    font-family: var(--v-f-fm-text);
}
#typora-quick-open-input input {
    border-radius: var(--v-r-s) var(--v-r-s-xc);
    max-height: 40px;
    border-color: transparent;
    box-shadow: none;
    font-size: 1.5em;
    padding: 5px 10px;
}
.ty-quick-open-category-title {
    color: var(--h-f);
}
.typora-quick-open-list {
    padding: 5px 0;
}
// 快速打开搜索结果条目
.typora-quick-open-item {
    height: 40px;
    border-radius: var(--v-r-s) var(--v-r-s-xc);
    margin-left: 5px;
    margin-right: 5px;
    padding-left: 15px;
}
.typora-quick-open-item:hover {
    background: var(--pn-c-a) !important;
    color: var(--d-fc);
}
.typora-quick-open-item.active {
    box-shadow: @tocItemCurrent_boxShadow;
    background: inherit;
}
.typora-quick-open-item-path {
    font-size: .625em;
}

// 目录/文件节点
.file-tree-node {
    font-family: var(--v-f-fm-bd);
}
// 目录节点
.file-tree-node[data-has-sub=true] {
    font-weight: var(--v-f-w-bd);
}
.file-tree-node[data-has-sub=false] {
    font-weight: normal;
}
// 文件节点
.file-library-file-node {
    border-radius: var(--v-r-s) var(--v-r-s-xc);
}
// 当前节点
.file-library-file-node.active {
    box-shadow: @tocItemCurrent_boxShadow;
}
// 点击节点
.file-library-node:not(.file-node-root):focus>.file-node-content {
    outline: 0;
}
// 文件名（含扩展名）
body.os-windows .file-node-title { // for Win
    margin-top: 0;
}
// 扩展名
.file-node-title-ext-part {
    color: var(--d-fc-a);
}

// ----------------------------------------
// 源码模式
#typora-source .CodeMirror {
    font-family: var(--monospace);
}
#typora-source .CodeMirror-lines {
    margin: 0 10px;
    max-width: 100%;
}
#typora-source .CodeMirror pre {
    font-family: var(--v-f-fm-text);
}
// 闪动光标
#typora-source .CodeMirror-cursor {
    border-color: var(--a-hover-color);
}
// 标题
#typora-source .cm-header {
    color: var(--h-f);
    font-family: var(--v-f-fm-title);
    font-weight: var(--v-f-w-title);
}
// 链接
#typora-source .cm-link {
    color: var(--a-hover-color);
    font-family: var(--monospace);
    font-weight: normal;
    text-decoration: none;
}
// 图片语法内链接
#typora-source .cm-string+.cm-link,
#typora-source .cm-tag+.cm-link,
#typora-source .cm-overlay+.cm-link {
    color: var(--d-fc-a);
}
// 图片
#typora-source .cm-tag {
    color: var(--a-color);
    font-family: var(--monospace);
}
// 链接内容
#typora-source .cm-string {
    color: var(--d-fc-a);
    font-family: var(--monospace);
}
// 引用块
#typora-source pre.cm-atom {
    background: var(--blockquote-bg);
}
#typora-source .cm-atom,
#typora-source .cm-atom .cm-number {
    color: var(--d-fc);
}
// 注释（code）
#typora-source .cm-comment {
    font-size: .9em;
    font-family: var(--monospace);
    background: var(--code-bg);
    color: var(--code-t);
}
// 粗体
#typora-source .cm-strong {
    font-family: var(--v-f-fm-bd);
}
// 删除
#typora-source .cm-del {
    color: var(--d-fc-a);
}
// 表格行
#typora-source pre.cm-table-row {
    font-family: var(--monospace);
}
// 当前焦点行
#typora-source .CodeMirror-activeline-background {
    border-bottom: @focusStyle;
}
// 列表序号
#typora-source .cm-block-start.cm-variable-2 {
    color: var(--d-fc-a);
    font-family: var(--v-f-fm-num);
}

// 错误信息
.error-message {
    color: var(--a-hover-color) !important;
}

// 编辑时的 Markdown 语法符号
.md-meta {
    color: var(--a-hover-color);
    line-height: 1;
}

// 针对在编辑模式时无效图片的样式
// 导出后对应的样式为 .v-img-lost
.md-img-error>.md-meta {
    color: var(--ac-rd-lg) !important;
    font-style: italic;
    border: 2px dashed var(--ac-rd-lg);
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    line-height: @paragraphInnerLineHeight;
    padding: 1px;
    background-size: auto;
    background-repeat: repeat;
}
// 获得焦点编辑
.md-img-error[contenteditable="true"]>.md-meta {
    width: initial;
    height: initial;
    display: inline !important;
}

// 排除多媒体类的
@errorAudio: ~':is(.md-img-error[data-src*=".mp3"], .md-img-error[data-src*=".m4a"], .md-img-error[data-src*=".ogg"], .md-img-error[data-src*=".wav"])';
@errorVideo: ~':is(.md-img-error[data-src*=".ogv"], .md-img-error[data-src*=".mp4"], .md-img-error[data-src*=".webm"])';
@{errorAudio}>.md-meta,
@{errorVideo}>.md-meta {
    border: none;
    color: var(--h-f) !important;
    border: inherit;
    padding: 5px;
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    background-image: none !important;
    background-color: var(--pn-c) !important;
    width: initial;
    height: initial;
    display: inline-block !important;
    visibility: visible !important;
}
@{errorAudio}>.md-meta:first-of-type:before {
    content: "🔊";
}
@{errorAudio}>.md-meta:first-of-type:after {
    content: "( Export HTML to Hear Audio )";
    text-transform: uppercase;
    color: var(--a-hover-color);
    font-size: .625em;
    text-align: center;
    display: block;
}
@{errorVideo}>.md-meta:first-of-type:before {
    content: "🎦";
}
@{errorVideo}>.md-meta:first-of-type:after {
    content: "( Export HTML to Watch Video )";
    text-transform: uppercase;
    color: var(--a-hover-color);
    font-size: .625em;
    text-align: center;
    display: block;
}

// 针对 header 锚点占位
.md-header-anchor {
    margin: 0 !important;
    vertical-align: top !important;
}

// 重新定义 emoji 符号在编辑时的排版
.md-emoji-span::before {
    vertical-align: baseline;
}

// 脚注行序号
.md-fn-count {
    font-family: var(--v-f-fm-bd);
    font-weight: normal;
}

.md-fn-count::before {
    content: "[";
}

.md-fn-count::after {
    content: "] ";
}

// 针对 YAML 的样式
@yamlMarginTopBottom: 12px;
@yamlMarginLeftRight: 0;
@yamlBorderWidth: 2px;
@yamlOnEditing: ~"@{writeOnEditing}>pre.md-meta-block:first-child";
@{yamlOnEditing} {
    font-family: var(--monospace);
    font-weight: var(--v-f-w-text);
    font-size: .875em;
    line-height: @paragraphInnerLineHeight;
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    padding: 24px 10px 5px 10px;
    color: var(--a-color);
    background: var(--code-bg);
    border: @yamlBorderWidth dashed var(--std-code-shadow);
    margin: 0 @yamlMarginLeftRight @yamlMarginTopBottom;
    height: @defaultLineHeight * 14px * 1 + 24px + 5px; // 14px 为 YAML 字号，10px 为 YAML 语法提示字号
}
// 针对 YAML 提示内容
@{yamlOnEditing}:empty:before,
@{yamlOnEditing}::before {
    content: "--- YAML Front Matter ---";
    text-transform: uppercase;
    font: @syntaxTipsFont;
    position: absolute;
    margin-top: -16px;
    color: var(--d-fc);
    opacity: .6;
}
// 展开全部的按钮样式
@{yamlOnEditing}::after {
    content: "More content has hidden / 更多内容已被隐藏 ▲";
    text-transform: uppercase;
    font-family: var(--v-f-fm-bd);
    font-weight: var(--v-f-w-bd);
    font-size: .75em;
    position: absolute;
    top: 20px;
    left: @writePaddingRight;
    right: @writePaddingRight;
    padding: 5px 10px;
    color: @docLibButtonForeColor;
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    line-height: 1;
    white-space: pre;
    text-align: center;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: radial-gradient(ellipse 800px 30px at bottom, var(--a-hover-color), transparent 20%),
        radial-gradient(ellipse 600px 50px at bottom, @docLibButtonBgColor, transparent 40%),
        radial-gradient(ellipse 800px 50px at bottom, @docLibButtonBgColor, transparent 50%);
}
@{yamlOnEditing}:hover::after {
    content: "Click to show all content / 点击显示全部内容 ▼";
    text-transform: uppercase;
    font-size: .875em;
    color: @docLibButtonForeHoverColor;
    background: radial-gradient(ellipse 600px 50px at bottom, var(--a-hover-color), transparent 50%),
        radial-gradient(ellipse 800px 50px at bottom, var(--a-hover-color), transparent 60%);
}
// 针对 YAML 无内容时
@{yamlOnEditing}:empty {
    padding: 5px 10px;
    height: auto;
}
// 提示输入 YAML 内容
@{yamlOnEditing}:empty:before {
    content: "Input your YAML Front Matter ...";
    font-style: normal;
    font-weight: normal;
    position: static;
    opacity: .2;
}
// 针对 YAML 无内容，或获得焦点后隐藏展开全部按钮
@{yamlOnEditing}:empty:after,
@{yamlOnEditing}.md-focus:after {
    display: none;
}

// 针对 YAML / code 获得焦点
@{yamlOnEditing}.md-focus, // YAML 等获得焦点
@{writeOnEditing} .md-expand code, // code 获得焦点
// 预置颜色色号获得焦点
@{writeOnEditing} span:is([md-inline="code"],[md-inline="strong"],[md-inline="em"],[md-inline="highlight"],[md-inline="underline"])+sub.md-expand .md-plain,
@{writeOnEditing} :is(sup, sub)+sub.md-expand .md-plain,
// 单元格预置颜色色号获得焦点
@{writeOnEditing} table :is(th,td)>span>sub:first-child.md-expand .md-plain,
@{writeOnEditing} table :is(th,td)>span>sub:last-child.md-expand .md-plain,
// 引用块内预置颜色色号获得焦点
@{writeOnEditing} blockquote p>sub:only-child.md-expand .md-plain {
    opacity: 1;
    // 输入光标颜色
    caret-color: var(--a-hover-color);
    box-shadow: var(--v-input-focus-inn-shadow), var(--v-input-focus-shadow);
    border: none;
    height: auto;
}
@{yamlOnEditing}.md-focus { // YAML 等获得焦点后
    border: none;
    // 在原来 margin 基础上，补偿因 border 取消后的空间变化
    margin: 2px @yamlMarginLeftRight+2px @yamlMarginTopBottom+2px;
}
// 源码模式下的 YAML
#typora-source pre.cm-yaml {
    font-family: var(--monospace);
    font-weight: var(--v-f-w-text);
    font-size: .875em;
    background: var(--code-bg);
}

/**************************************
* Header Counters in TOC 目录中的标题序号样式
**************************************/

/* No link underlines in TOC */

content .md-toc::before {
    content: "☰ Table of contents / 目录 ☰";
    text-transform: uppercase;
    font: @syntaxTipsFont;
    color: var(--d-fc);
    padding-left: 35px;
    opacity: .6;
}

// 目录操作栏
#write div.md-toc-tooltip {
    background-color: var(--d-fc);
    line-height: 1.5;
    color: var(--d-bc);
    border: none;
    margin-left: 30px;
    padding-left: 10px;
    width: 250px;
    border-radius: var(--v-r-b);
}
#write div.md-toc-tooltip>span {
    font-size: .875em;
}
#write div.md-toc-tooltip .btn {
    padding: 1px 6px;
    margin: 3px;
}
#write div.md-toc-tooltip .btn:hover {
    background-color: var(--item-hover-bg-color);
    color: var(--item-hover-text-color);
}


.md-toc:focus .md-toc-content {
    border-color: var(--border-color);
}

.md-toc-content,
.outline-content {
    counter-reset: h1;
}

.md-toc-h1 {
    margin-left: 0;
    padding-left: 5px;
}
.md-toc-h1,
.outline-h1 {
    counter-reset: h2;
}

.md-toc-h2 {
    margin-left: 0;
    padding-left: 15px;
}
.md-toc-h2,
.outline-h2 {
    counter-reset: h3;
}

.md-toc-h3 {
    margin-left: 0;
    padding-left: 25px;
}
.md-toc-h3,
.outline-h3 {
    counter-reset: h4;
}

.md-toc-h4 {
    margin-left: 0;
    padding-left: 35px;
}
.md-toc-h4,
.outline-h4 {
    counter-reset: h5;
}

.md-toc-h5 {
    margin-left: 0;
    padding-left: 45px;
}
.md-toc-h5,
.outline-h5 {
    counter-reset: h6toc;
}

.md-toc-h6,
.outline-h6 {
    counter-reset: h6toc;
    content: "";
}

// 根据主题配置，是否控制编辑时显示的大纲层级
.genOutlineOnEditing() when (isdefined(@hideOutlineOver)) {
    .forOutlineH2() when (@hideOutlineOver = 2) {
        .outline-h2 .outline-expander,
        .md-toc-h2 .v-toc-folder {
            visibility: hidden !important;
        }
        .outline-h3,
        .outline-h4,
        .outline-h5,
        .md-toc-h3,
        .md-toc-h4,
        .md-toc-h5 {
            display: none !important;
        }
    }
    .forOutlineH2();
}
.genOutlineOnEditing();

// 微调大纲节点的缩进
.outline-h1>.outline-item {
	padding-left: .35em;
}
.outline-h2>.outline-item {
	padding-left: 1.35em;
}
.outline-h3>.outline-item {
	padding-left: 2.35em;
}
.outline-h4>.outline-item {
	padding-left: 3.35em;
}
.outline-h5>.outline-item {
	padding-left: 4.35em;
}
.outline-h6>.outline-item {
	padding-left: 4.85em;
    color: var(--toc-h-num-color);
    font-size: .875em;
}
.outline-h6>.outline-item>.outline-label::before {
    content: @h6BeforeContent;
    opacity: .6;
}

@coverAfterYAMLforToc: ~"@{writeOnEditing}>pre.md-meta-block:first-child+h6";
@coverWithoutYAMLforToc: ~"@{writeOnEditing}>h6:first-child";
@escbackcoverIdForToc: ~".md-toc>.md-toc-content>.md-toc-h1:last-child";
@{coverAfterYAMLforToc}+@{escbackcoverIdForToc}, // 有 YAML 的封面情况下排除文档内 TOC 的 h1(封底) 情况
@{coverWithoutYAMLforToc}+@{escbackcoverIdForToc},  // 无 YAML 的封面情况下排除文档内 TOC 的 h1(封底) 情况
.md-toc-h6 {
    display: none;
    margin-left: 0;
    padding-left: 50px;
}

.outline-label {
    word-break: break-word;
}

// 如果标题自动编号颜色有设置透明度，则编辑时的大纲生成合适的透明度
.getOutlineLabel() when not (@contentHeaderNumOpacity = 1) {
    .outline-label::before {
        color: var(--toc-h-num-color);
    }
}
.getOutlineLabel();

.md-toc-h1::before,
.outline-h1 .outline-label::before {
    counter-increment: h1;
    content: @h1BeforeContent " ";
}

.md-toc-h1>.md-toc-inner {
    margin-left: 0;
    font-weight: var(--v-f-w-title);
}

.md-toc-h2::before,
.outline-h2 .outline-label::before {
    counter-increment: h2;
    content: @h2BeforeContent " ";
}

.md-toc-h2>.md-toc-inner {
    margin-left: 0;
}

.md-toc-h3::before,
.outline-h3 .outline-label::before {
    counter-increment: h3;
    content: @h3BeforeContent " ";
}

.md-toc-h3>.md-toc-inner {
    margin-left: 0;
}

.md-toc-h4::before,
.outline-h4 .outline-label::before {
    counter-increment: h4;
    content: @h4BeforeContent " ";
}

.md-toc-h4>.md-toc-inner {
    margin-left: 0;
}

.md-toc-h5::before,
.outline-h5 .outline-label::before {
    counter-increment: h5;
    content: @h5BeforeContent " ";
}

.md-toc-h5>.md-toc-inner {
    margin-left: 0;
}

.md-toc-h6::before,
.outline-h6 .outline-label::before {
    counter-increment: h6;
    content: "";
}

// 导出 HTML 后的目录大纲内的自动编码内容
// 包括导航中心、#write 内的正文
@{onHTML} :is(.md-toc-h1, .md-toc-h2, .md-toc-h3, .md-toc-h4, .md-toc-h5)::before {
    content: attr(data-header-num) " " !important;
}

.typora-export-show-outline .typora-export-content {
    max-width: none;
    display: inherit;
}

// 编辑时，配合分栏样式使用
@{writeOnEditing} hr {
    border: none;
    background: var(--ac-bk-fade);
    height: 2px;
    cursor: crosshair;
}
@{writeOnEditing} hr:hover {
    background: var(--a-hover-color);
}
@{writeOnEditing} .md-hr+.md-hr>hr {
    margin-top: -14px !important;
}

// 明信片编辑时样式
@{writeOnEditing} blockquote:has(.md-image[data-src*="#card"]>img) {
    padding: 0;
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    border: none;
}
@{writeOnEditing} blockquote p:has(.md-image[data-src*="#card"])+blockquote {
    color: var(--d-fc);
    background-color: var(--pn-c);
    border: none;
    margin: 0;
    padding: 10px;
    border-radius: 0 0 var(--v-r-b) var(--v-r-b-xc);
}

// ====================
// 编辑时预置颜色色号的公共样式
@colorCode: ~'em>sub:only-child';
@colorCodeMd: ~'[md-inline="em"]>@{colorCode}';
@colorCodeOnStart: ~'[md-inline="em"]:first-child>em>sub:only-child';
// ---
@colorCodeInBlockquote: ~'blockquote @{colorCodeOnStart}';
@colorCodeOnPgStart: ~'p>@{colorCodeOnStart}';
@colorCodeOnCellStart: ~'table :is(th,td)>span>@{colorCodeOnStart}';
@colorCodeBeforeSpanFmt: ~'span:is([md-inline="code"],[md-inline="strong"],[md-inline="em"],[md-inline="highlight"],[md-inline="underline"])+@{colorCodeMd}';
@colorCodeBeforeSupSub: ~':is(sup, sub)+@{colorCodeMd}';

@{writeOnEditing} @{colorCodeInBlockquote}, // 引用块着色
@{writeOnEditing} @{colorCodeOnPgStart}, // 文本着色（段落）
@{writeOnEditing} @{colorCodeOnCellStart}, // 单元格（段落）
@{writeOnEditing} table :is(th,td)>span>[md-inline="em"]:last-child>em>sub:only-child,
@{writeOnEditing} @{colorCodeBeforeSpanFmt}, // 文本着色
@{writeOnEditing} @{colorCodeBeforeSupSub} { // 文本着色（指定格式）
    font: @syntaxTipsFont;
    font-size: 10px;
    font-weight: bold;
    border-radius: 0 4px 4px 4px;
    bottom: 0;
    color: var(--d-fc);
    background-color: var(--pn-c-a);
    padding: 1px 3px;
    margin: 0 5px 0 1px;
    line-height: @miniLineHeight !important;
    opacity: .6;
}
// 对于以下指定的色号标记，默认不显示
@{writeOnEditing} @{colorCodeOnPgStart}, // 文本着色（段落）
@{writeOnEditing} @{colorCodeOnCellStart}, // 单元格（段落）
@{writeOnEditing} @{colorCodeBeforeSpanFmt}, // 文本着色
@{writeOnEditing} @{colorCodeBeforeSupSub} { // 文本着色（指定格式）
    display: none;
}
// 进入对应内容的编辑时才显示
@{writeOnEditing} .md-focus @{colorCodeOnStart}, // 文本着色（段落）、单元格（段落）
@{writeOnEditing} .md-expand+@{colorCodeMd},
@{writeOnEditing} .md-expand @{colorCode},
@{writeOnEditing} .md-expand a>@{colorCodeMd} {
    display: initial !important;
}
// 段落微调
@{writeOnEditing} @{colorCodeOnPgStart}, // 文本着色（段落）
@{writeOnEditing} @{colorCodeOnCellStart} { // 单元格（段落）
    color: var(--d-bc);
    border-radius: 4px 4px 0 4px;
    background-color: var(--d-fc);
    margin: 0 1px 0 0;
}

// 针对 引用块着色 的微调
@{writeOnEditing} @{colorCodeInBlockquote} {
    display: initial !important;
    bottom: 0;
}
// 针对 引用块着色 的前缀提示样式
@{writeOnEditing} @{colorCodeInBlockquote}::before {
    content: ">";
    color: var(--d-bc);
    padding-right: 2px;
    opacity: .6;
}
// 针对 文本着色/单元格（段落） 的前缀提示样式
@{writeOnEditing} @{colorCodeOnPgStart}::before,
@{writeOnEditing} @{colorCodeOnCellStart}::before {
    content: "¶";
    color: var(--d-bc);
    padding-right: 2px;
    opacity: .6;
}
// 针对 文本着色（指定格式） 的前缀提示样式
@{writeOnEditing} @{colorCodeBeforeSpanFmt}::before,
@{writeOnEditing} @{colorCodeBeforeSupSub}::before {
    content: "";
}

// 表格列格式：右对齐
@{writeOnEditing} table th:not([style*=":right"])>span>span:not([md-inline="plain"]):only-child:before,
@{writeOnEditing} table th[style*=":right"]>span::before {
    content: "CF/列格式";
    text-transform: uppercase;
    font: @syntaxTipsFont;
    font-size: 10px;
    display: block;
    margin-top: -.7em;
    opacity: .6;
}

// 有序、无序列表下的图片、非图片段落
#write li .md-p>span:not([class*=md-image]) {
    margin-top: 0;
    margin-bottom: 0;
}
#write li .md-p>span[class*=md-image] {
    margin-bottom: @paragraphPadding;
}

// 有序列表下的任务清单
#write ol>.md-task-list-item { // 1 级
    list-style-type: none !important;
}
#write ol>li>ol>.md-task-list-item { // 2 级
    list-style-type: none !important;
}
#write ol>li>ol>li>ol>.md-task-list-item { // 3 级
    list-style-type: none !important;
}
#write ol>li>ol>li>ol>li>ol>.md-task-list-item { // 4 级
    list-style-type: none !important;
}
#write ol>li>ol>li>ol>li>ol>li>ol>.md-task-list-item { // 5 级
    list-style-type: none !important;
}
#write ol>li>ol>li>ol>li>ol>li>ol>li>ol>.md-task-list-item { // 6 级
    list-style-type: none !important;
}

// 无序列表下的任务清单
#write ul>.md-task-list-item { // 1 级
    list-style-type: none !important;
}
#write ul>li>ul>.md-task-list-item { // 2 级
    list-style-type: none !important;
}
#write ul>li>ul>li>ul>.md-task-list-item { // 3 级
    list-style-type: none !important;
}
#write ul>li>ul>li>ul>li>ul>.md-task-list-item { // 4 级
    list-style-type: none !important;
}
#write ul>li>ul>li>ul>li>ul>li>ul>.md-task-list-item { // 5 级
    list-style-type: none !important;
}
#write ul>li>ul>li>ul>li>ul>li>ul>li>ul>.md-task-list-item { // 6 级
    list-style-type: none !important;
}

// 任务清单
.md-task-list-item {
    padding-left: 32px;
}
// 任务清单复选框
@taskListMarginLeft: -1.25em;
.md-task-list-item>input {
    margin-top: .5em !important;
    margin-left: @taskListMarginLeft !important;
}
.v-svg-input-checkbox {
    position: absolute;
    margin-top: .3125em !important;
    margin-left: @taskListMarginLeft !important;
    display: inline-block;
    vertical-align: middle;
}

// 任务清单文本
.md-task-list-item>p {
    margin-top: 0;
    margin-bottom: 0;
}

.md-diagram-panel {
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    padding: 0;
}

// ====================
// 第 1 题注（编辑时样式）
// 注意：因格式与 @menuStepPath_OnEditing 接近，注意调整时进行多点验证
//
// 高亮内的斜体，或斜体内的高亮
// 针对题注简化语法的样式
@cap_prefix: ~'[md-inline="em"]:only-child>em>[md-inline="highlight"]>mark';
@cap1_OnEditing: ~'p>@{cap_prefix}';
@cap2_OnEditing: @cap1_OnEditing~'>[md-inline="em"]>em';
@{writeOnEditing} @{cap1_OnEditing} {
    font: normal .875em var(--v-f-fm-bd);
    color: @captionTextColor;
    background: @captionBackground !important;
    box-shadow: none;
    text-shadow: none;
    padding: 2px 10px;
    border-radius: var(--v-r-b) var(--v-r-b) 0 0;
    display: inline-block;
}
@{writeOnEditing} p:has(@{cap_prefix}) + p {
    margin-top: 0;
}
@{writeOnEditing} li>@{cap1_OnEditing} {
    margin: 0; // 列表下的微调
}
@{writeOnEditing} @{cap1_OnEditing}::before {
    content: "Caption/题注 ▸ ";
    text-transform: uppercase;
    font: @syntaxTipsFont;
    color: var(--a-color);
}
// 编辑时 h6 格式设置的题注样式
@{writeOnEditing} h6:has(+p>.md-image)::after, // 插图
@{writeOnEditing} h6:has(+.md-table-fig)::after, // 表格
@{writeOnEditing} h6:has(+.md-fences)::after, // 代码块、```math 语法公式
@{writeOnEditing} h6:has(+.md-math-block)::after { // $$ 语法公式
    content: " ◂ Caption/题注";
    text-transform: uppercase;
    font: @syntaxTipsFont;
    color: var(--a-color);
    opacity: 1;
}

// --------------------
// 第 2 题注（编辑时样式）
@{writeOnEditing} @{cap2_OnEditing}::before {
    content: " │ B.Caption/底部题注. ";
    text-transform: uppercase;
    font: @syntaxTipsFont;
    color: var(--ac-t1-lg);
}
@{writeOnEditing} .md-expand mark .md-meta {
    color: var(--a-hover-color);
    opacity: 1 !important;
}

// ====================
// 面包屑（分步分级）样式
// 注意：因格式与 @cap1_OnEditing 接近，注意调整时进行多点验证
@stepwisePrefix_OnEditing: ~'[md-inline="em"]';
@stepwiseSuffix_OnEditing: ~'>em>[md-inline="highlight"]>mark';
// 调整该选择器时须同步调整 vlook.js 中 Stepwise 对应的选择器
@triangleWidth: .5em;
@stepwiseTextColor: var(--d-fc);
@{writeOnEditing} p>@{stepwisePrefix_OnEditing}:not(:only-child)@{stepwiseSuffix_OnEditing},
@{writeOnEditing} .td-span>@{stepwisePrefix_OnEditing}@{stepwiseSuffix_OnEditing},
.v-stepwise {
    font: normal .875em var(--v-f-fm-code);
    line-height: 1;
    color: @stepwiseTextColor;
    box-shadow: none;
    text-shadow: none;
    padding: 5px 5px 5px 8px;
    border-radius: var(--v-r-tag) 0 0 var(--v-r-tag);
    border: 1px solid var(--d-bc);
    position: relative;
    display: inline-block;
    margin-right: 10px;
    background-color: var(--std-code-shadow) !important;
    background: var(--std-code-shadow) !important;
}
@{writeOnEditing} p>@{stepwisePrefix_OnEditing}:not(:only-child)@{stepwiseSuffix_OnEditing}::before,
@{writeOnEditing} .td-span>@{stepwisePrefix_OnEditing}@{stepwiseSuffix_OnEditing}::before,
.v-stepwise::before {
    content: '';
    position: absolute;
    top: -1px;
    right: calc(-1em + 5px);
    width: 0;
    height: 0;
    border-top: calc(1em - 1px) solid transparent;
    border-bottom: calc(1em - 1px) solid transparent;
    border-left: calc(1em - 6px) solid var(--d-bc);
}
@{writeOnEditing} p>@{stepwisePrefix_OnEditing}:not(:only-child)@{stepwiseSuffix_OnEditing}::after,
@{writeOnEditing} .td-span>@{stepwisePrefix_OnEditing}@{stepwiseSuffix_OnEditing}::after,
.v-stepwise::after {
    content: '';
    position: absolute;
    top: 0;
    right: calc(-1em + 7px);
    width: 0;
    height: 0;
    border-top: calc(1em - 2px) solid transparent;
    border-bottom: calc(1em - 2px) solid transparent;
    border-left: calc(1em - 7px) solid var(--std-code-shadow);
}
// 分步分级内容分隔样式
.v-stepwise {
    cursor: var(--cur-copy-normal);
}
@arrowWidth: 30%;
.v-stepwise label {
    background-color: @stepwiseTextColor;
    width: @triangleWidth;
    display: inline-block;
    clip-path: polygon(0 0, @arrowWidth 0, 100% 50%, @arrowWidth 100%, 0 100%, 100% - @arrowWidth 50%);
    margin: 0 5px;
    opacity: .3;
}
@{writeOnEditing} p>@{stepwisePrefix_OnEditing}:not(:only-child)@{stepwiseSuffix_OnEditing} a,
@{writeOnEditing} .td-span>@{stepwisePrefix_OnEditing}@{stepwiseSuffix_OnEditing} a,
@{writeOnHTML} .v-stepwise a {
    color: @stepwiseTextColor !important;
    font-weight: var(--v-f-w-bd);
}
// 内嵌的文本链接编辑时样式
@{writeOnEditing} p>@{stepwisePrefix_OnEditing}:not(:only-child)@{stepwiseSuffix_OnEditing} .md-link .md-url,
@{writeOnEditing} .td-span>@{stepwisePrefix_OnEditing}@{stepwiseSuffix_OnEditing} .md-link .md-url {
    color: var(--a-color);
}
@{writeOnEditing} p>@{stepwisePrefix_OnEditing}:not(:only-child)@{stepwiseSuffix_OnEditing} a::after,
@{writeOnEditing} .td-span>@{stepwisePrefix_OnEditing}@{stepwiseSuffix_OnEditing} a::after,
.v-stepwise a::after {
    content: "◥";
    font-size: .875em;
    color: var(--a-color);
    width: 20px;
    height: 20px;
    margin-left: -4px;
    margin-top: -8px;
    position: absolute;
}
@{writeOnEditing} p>@{stepwisePrefix_OnEditing}:not(:only-child)@{stepwiseSuffix_OnEditing} a:hover::after,
@{writeOnEditing} .td-span>@{stepwisePrefix_OnEditing}@{stepwiseSuffix_OnEditing} a:hover::after,
.v-stepwise a:hover::after {
    color: var(--a-hover-color) !important;
}

/**************************************
* 重定义Typora原生样式
**************************************/

// 强制指定使用被修改过后的 --bg-color，确保背景图片能在 Typora 编辑时正常显示
@{writeOnEditing} {
    background: var(--d-bc) var(--d-bi);
}

@{writeOnEditing} img {
    padding: 0;
    border: none;
}
// 图片带 srcset 参数的微调
@{writeOnEditing} :is(span[md-inline="image"][data-src*="darksrc="],
span[md-inline="image"][data-src*="srcset="])::before {
    content: "◩";
    font: @syntaxTipsFont;
    color: var(--d-bc);
    border-radius: var(--v-r-b);
    word-break: initial;
    padding: 1px 4px;
    margin: 5px 0 0 5px;
    position: absolute;
    background: var(--d-fc);
    opacity: .6;
}
@{writeOnEditing} span[md-inline="image"][data-src*="srcset="]::before {
    content: "@";
}
@{writeOnEditing} span[md-inline="image"][data-src*="srcset="][data-src*="darksrc"]::before {
    content: "@ ◩";
}
@{writeOnEditing} span[md-inline="image"][data-src*="#icon"]::before {
    content: "" !important;
}

#write {
    max-width: 100%;
    margin: 0 auto;
    padding: @writePaddingRight;
}

// 适配宽度显示
body:not([class*="pin-outline"]) @{writeOnEditing}, // 编辑时，如收起了左侧面板
body[class*="on-focus-mode"] @{writeOnEditing}, // 编辑时，如启用了「专注模式（Focus Mode）」
body[class*="ty-on-typewriter-mode"] @{writeOnEditing}, // 编辑时，如启用了「打字机模式（Typewriter Mode）」
#write.max.fill-width {
    width: auto;
    box-shadow: none;
}
#write.max.fill-width {
    margin-left: var(--v-write-ml-def) !important;
}

#write>:is(ul,ol):first-child {
    margin-top: 30px;
}

// 编辑时的引用块折叠（details、summary）
@summaryOnEditing: ~"blockquote>h6:first-child";
@{writeOnEditing} @{summaryOnEditing} {
    color: @h6Color;
    font-size: @h7FontSize;
    padding: 0 0 .3125em 0;
    margin-bottom: .3125em;
    text-align: @h7TextAlign;
    justify-content: @h7TextAlign;
    display: flex;
    align-items: center;
    vertical-align: middle;
    white-space: pre-wrap;
    line-height: 1;
    border-radius: 0;
    width: 100%;
}
@{writeOnEditing} @{summaryOnEditing}::before {
    content: "" !important;
    background-color: var(--d-fc);
    mask: url("") no-repeat center;
    position: relative;
    display: inline-block;
    overflow: visible;
    border-radius: 0;
    width: 20px;
    height: 20px;
    font-size: 1.2em;
    margin-right: 5px;
    transition: all var(--v-trans-dur) ease-out;
    opacity: 1;
}
// 编辑时自动折叠收起
@hasSummaryOnEditing: ~"blockquote:has(>h6:first-child)";
@{writeOnEditing} @{hasSummaryOnEditing} {
    overflow: hidden;
    height: 2.625em;
}
@{writeOnEditing} @{hasSummaryOnEditing} :is(blockquote,.md-alert)::before { // hr 分栏内容提示
    display: none;
}
// 引用内的折叠
@{writeOnEditing} :is(li, blockquote) @{hasSummaryOnEditing} {
    height: 1.25em;
}
// 编辑时任意子元素获得焦点后，自动展开
@summaryFocusOnEditing: ~"@{hasSummaryOnEditing}:has(.md-focus)";
@{writeOnEditing} @{summaryFocusOnEditing} {
    height: auto;
}
@{writeOnEditing} @{summaryFocusOnEditing} :is(blockquote,.md-alert)::before { // hr 分栏内容提示
    display: block;
}
@{writeOnEditing} @{summaryFocusOnEditing}>h6:first-child {
    border-bottom: @quoteTitleBorderWidth solid var(--ac-bk-fade);
}
@{writeOnEditing} @{summaryFocusOnEditing}>h6:first-child::before {
    transform: rotate(45deg);
    opacity: .6;
}

// 多行代码样式（排除 ```math、```mermaid 语法）
#write .md-fences:not([class*="md-fences-math"]):not([class*="md-diagram"]) {
    color: var(--d-fc);
    font-family: @themeMonoFont, var(--v-f-fm-code);
    border-radius: var(--v-r-b) var(--v-r-b-xc);
    border: @imgBorderWidth solid var(--std-code-shadow);
    margin: 0;
    background-color: var(--std-code-shadow);
}
// 代码块获得焦点
@{writeOnEditing} .md-fences.md-focus {
    box-shadow: var(--v-input-focus-shadow) !important;
    border-color: var(--a-color);
}
@{writeOnEditing} .md-fences.md-focus .md-diagram-panel {
    margin-top: 4px !important;
}
.md-fences.md-diagram {
    box-shadow: none;
}
pre.md-fences-advanced.md-focus .md-fences-adv-panel {
    border: none;
}
.md-fences-advanced:not(.md-focus) {
    background: none;
}

#write .md-fences-adv-panel {
    margin-top: 0;
    position: relative;
    text-align: left;
}
@{writeOnEditing} .md-fences-math[lang="math"]>.md-fences-adv-panel {
    background-color: var(--d-bc) !important;
}
// 导出后对 mermaid 图表的微调
@{writeOnHTML} .md-fences-adv-panel {
    margin-top: @paragraphPadding !important;
}

// 编辑时引用块折叠标题下紧跟的内容
@{writeOnEditing} blockquote>h6+:is(.md-fences, figure) {
    margin-top: 1em;
}

// 针对 Typora 输入框
#file-library-search-input {
    border-color: var(--v-input-focus-border) !important;
}
// 针对 Quick Open
#typora-quick-open-input input:focus,
// 输入控件
.form-control:focus {
    border-color: var(--v-input-focus-border) !important;
    box-shadow: var(--v-input-focus-shadow) !important;
}
